<script lang="ts">
import { defineComponent, reactive, onMounted, ref } from 'vue'
import { Pagination, Grid } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/grid'
import 'swiper/css/pagination'
import router from '@/router'
import resizeRank from '@/util/screen'

import { Start, End } from '@/hook/animation'

export default defineComponent({
  name: 'swiper-example-slides-per-column',
  title: 'Multi row slides layout',
  url: import.meta.url,
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    productData: Array
  },
  setup(props: any) {
    const rank = ref(0) /* 1为手机端 */
    onMounted(() => {
      /**
       * @methods 判定pc&movie
       */
      rank.value = resizeRank(rank.value)
      window.addEventListener('resize', () => {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 768) {
          rank.value = 1
        } else {
          rank.value = 0
        }
      })
    })

    const productData = props.productData
    const toMouseEnter = (item: any) => {
      /**
       * @methods 移入 
       */
      let dom1 = document.getElementById(item.id + 'text')
      let dom2 = document.getElementById(item.id + 'btn')
      Start(dom1, dom2)
    }
    const toMouseLeave = (item: any) => {
      /**
       * @methods 移出
       */
      let dom1 = document.getElementById(item.id + 'text')
      let dom2 = document.getElementById(item.id + 'btn')
      End(dom1, dom2)
    }

    const toProductDetail = (item: any) => {
      router.push({
        path: '/ProductDetail',
        query: {
          id: item.id
        }
      })
      /*  router.push({
         path: '/Products',
         query:{
           home:'is_recommend',
           promotionId:0
         }
       }) */
    }

    const toPromotion = () => {
      router.push({
        path: '/Products',
        query: {
          home: 'is_recommend',
          promotionId: 0
        }
      })
    }

    return {
      toMouseEnter,
      toMouseLeave,
      toProductDetail,
      productData,
      rank,
      modules: [Pagination, Grid],
    }
  }
})


</script>>

<template>
  <div class="box">
    <swiper class="swiper" :modules="modules" :slides-per-view="3" v-if="rank == 0"
      :grid="productData.length < 5 ? { rows: 1 } : (productData.length > 8 ? { rows: 3 } : { rows: 2 })" :space-between="20"
      :pagination="{ clickable: true }">
      <swiper-slide v-for="item in productData" :key="item.id" class="slide" @click="toProductDetail(item)"
        @mouseenter="toMouseEnter(item)" @mouseleave="toMouseLeave(item)">
        <el-card class="scaleImgCard" shadow="hover" style="min-height: 330px;border-radius: 15px;">
          <div class="flex" style="height:30px">
            <!-- <el-tag round color='#0071E3' style="margin-right:10px" v-if="item.is_new == 1">New Arrival</el-tag> -->
            <el-tag round color="#F56300" v-if="item.push_label">{{ item.push_label }}</el-tag>
          </div>
          <div class="product-middle">
            <div class="product-middle-img">
              <img :src="item.cover_image" alt="">
            </div>
            <div class="product-middle-name contentText">
              <text>{{ item.name }}</text>
            </div>
            <div class="product-middle_text_box" :id="String(item.id) + 'text'">
              <div class="product-middle-size contentText">{{ item.descr }}</div>
              <div class="product-middle-demand"></div>
            </div>
            <div class="product-middle-btn" :id="String(item.id) + 'btn'">
              <!-- <el-button color='#0071E3' size="large" type="primary" round>点击查看</el-button> -->
              <el-button color="#064DD6" size="large" round >马上查看</el-button>

            </div>
          </div>
        </el-card>
      </swiper-slide>
    </swiper>

    <swiper class="swiper" :modules="modules" :pagination="{ clickable: true }" v-else>
      <swiper-slide v-for="item in productData" :key="item.id" class="slide" @click="toProductDetail(item)">
        <el-card class="scaleImgCard" shadow="hover" style="min-height: 330px;border-radius: 15px;">
          <div class="flex" style="height:30px">
            <el-tag round color='#0071E3' style="margin-right:10px" v-if="item.is_new == 1">New Arrival</el-tag>
            <el-tag round color="#F56300" v-if="item.push_label">{{ item.push_label }}</el-tag>
          </div>
          <div class="product-middle">
            <div class="product-middle-img">
              <img :src="item.cover_image" alt="">
            </div>
            <div class="product-middle-name contentText">
              <text>{{ item.name }}</text>
            </div>
            <div class="product-middle_text_box" :id="String(item.id) + 'text'">
              <div class="product-middle-size contentText">{{ item.descr }}</div>
              <div class="product-middle-demand"></div>
            </div>
            <div class="product-middle-btn" :id="String(item.id) + 'btn'">
              <!-- <el-button color='#0071E3' size="large" type="primary" round>点击查看</el-button> -->
              <el-button color="#064DD6" size="large" round>马上查看</el-button>
            </div>
          </div>
        </el-card>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style lang="scss" scoped>
.swiper {
  overflow: initial;
}

:deep(.el-card) {
  overflow: hidden;
}


.box {
  margin-left: 40px;
}

.scaleImgCard {
  position: relative;
}

.slide {
  border-radius: 20px;
  margin-bottom: 40px;

  .product-middle {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 20px;
    // height: 100%;

    .product-middle-img {
      display: flex;
      justify-content: center;

      img {
        width: 80%;
        height: 180px;
        object-fit: contain;
      }
    }

    .product-middle-name {
      margin: 20px 0;
      display: flex;
      font-weight: bold;
      justify-content: center;
      font-weight: bold;

      text {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-overflow: -webkit-ellipsis-lastline;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center
      }
    }

    .product-middle-size {
      display: flex;
      justify-content: center;
      color: cornflowerblue;
      text-align:center;
    }

    .product-middle_text_box {
      position: absolute;
      left: 50%;
      top: 85%;
      transform: translate(-50%, 0px);
      opacity: 1;

    }

    .product-middle-btn {
      position: absolute;
      left: 50%;
      top: 85%;
      transform: translate(-50%, 0px);
      opacity: 0;
      margin-top: 10px;
    }
  }
}



.product-check {
  // box-shadow: 0px 5px 10px 0 #999;
}

:deep(.el-tag__content) {
  color: #fff;
}

:deep(.el-tag) {
  border: none;
}

:deep(.swiper-wrapper) {
  flex-direction: row !important;
}

@media screen and (max-width: 450px) {
  .box {
    margin-left: 0;
  }

  .product-middle {
    width: 100% !important;
  }

  .product-middle-name {
    text-align: center;
  }

  :deep(.el-card__body) {
    padding: 7px !important;
  }


  :deep(.el-card) {
    min-height: 300px !important;
  }

  .swiper {

    // padding: 0 60px;
    .slide {
      // width: 90% !important;
      padding-right: 30px;
    }
  }
}
</style>